<template>
    <div class="first-login-box" @keyup.enter="submitForm">
        <h2>For the sake of your account security, please set a new password first! </h2>
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="" prop="password">
                <el-input type="password" v-model.trim="form.password" placeholder="Please enter the new password"></el-input>
            </el-form-item>
            <el-form-item label="" prop="confirmpassword">
                <el-input type="password" v-model.trim="form.confirmpassword" placeholder="Please enter the new password again"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :loading="loading" type="primary" @click.prevent="submitForm">Enter</el-button>
            </el-form-item>
        </el-form>
        <transition name="el-fade-in">
            <div class="done" v-if="modifySuccess">
                <i class="el-icon-success"></i>
                <p>Password Reset Successful!</p>
                <p class="jump">Automatically jump back to login page after 3s!</p>
            </div>
        </transition>
    </div>
</template>

<script>
import { setTimeout } from 'timers';
    export default {
        name: 'FirstLoginForm',
        data() {
            // 密码验证
            const checkPass = (rule, value, callback) => {
                const reg = /^\w{6,18}$/

                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (!reg.test(value)) {
                    callback('The password is a combination of 6-18 bits of letters, numbers and underscores. The letters are case-sensitive.')
                } else {
                    if (this.form.confirmpassword !== '') {
                        this.$refs.form.validateField('confirmpassword')
                    }
                    callback()
                }
            }
            // 确认密码验证
            const confirmCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (value !== this.form.password) {
                    callback(new Error('Two inconsistent passwords!'))
                } else {
                    callback()
                }
            }

            return {
                loading: false,
                form: {
                    password: '',
                    confirmpassword: ''
                },
                rules: {
                    password: [
                        {validator: checkPass, trigger: 'blur'},
                    ],
                    confirmpassword: [
                        {validator: confirmCheckPass, trigger: 'blur'}
                    ]
                },
                modifySuccess: false
            }
        },
        methods: {
            // 设置新密码
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (!valid) return

                    this.loading = true

                    const res = await this.axios.get(`/OnlineTeacher/Personal/FirstChangPassword?newpassword1=${this.form.password}&newpassword2=${this.form.confirmpassword}&token=${localStorage.firstLogin}`)

                    this.loading = false
                    
                    if (res.code === 1) {
                        this.modifySuccess = true

                        setTimeout(() => {
                            this.$router.push('/login')
                        }, 3000)
                    } else {
                        this.$message.error('Failed to change password')
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .first-login-box {width: 428px; height: 380px; background: #fff; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 35px; overflow: hidden;}
    h2 {font-size: 20px; line-height: 28px; margin: 40px auto 20px;}
    .done {width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; text-align: center;}
    .done i {font-size: 80px; color: #7ED321; margin: 115px auto 40px;}
    .done p {font-size: 20px; color: #000;}
    .done .jump {font-size: 14px; color: #f00;}
</style>